<template>
  <!-- 题目列表中展示的题目详情 -->
  <div class="question">
    <div class="score mb10 mr10">
      <div><el-tag>试题分数</el-tag>{{ question.questionScore }} 分</div>
      <div v-if="question.subject">
        <el-tag> 所属学科</el-tag>{{ question.subject.subjectName }}
      </div>
      <div>
        <el-tag>试题难度</el-tag>{{ dictFormatDifficult(question.difficult) }}
      </div>
      <div>
        <el-tag>试题类型</el-tag>{{ dictFormatType(question.questionType) }}
      </div>
    </div>
    <div class="title">
      <el-tag class="mr20">试题名称</el-tag>
      <span v-html="question.questionTitle"> </span>
    </div>

    <div
      class="questionItems"
      v-for="v in JSON.parse(question.questionItems)"
      :key="v.prefix"
    >
      <div class="prefix">
        {{ v.prefix }}
      </div>
      <div class="content">
        <span v-html="v.content"></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  dicts: ["exam_question_difficult", "exam_question_type"],
  name: "question",
  props: {
    question: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    // 自定义方法翻译
    dictFormatDifficult(val) {
      return this.selectDictLabel(this.dict.type.exam_question_difficult, val);
    },
    dictFormatType(val) {
      return this.selectDictLabel(this.dict.type.exam_question_type, val);
    },
  },
};
</script>
<style scoped lang="scss">
.question {
  .score {
    font-size: 16px;
    div {
      margin: 0 20px 20px 0;
      .el-tag {
        margin-right: 12px;
      }
    }
  }
  .title {
    color: #303133;
    font-size: 16px;
  }
  .questionItems {
    display: flex;
    margin: 20px 0 10px 90px;
    align-items: center;
    .prefix {
      background-color: #f4f4f5;
      display: inline-block;
      padding: 0 10px;
      line-height: 30px;
      font-size: 12px;
      color: #409eff;
      border: 1px solid #d9ecff;
      border-radius: 4px;
      box-sizing: border-box;
    }
    .content {
      margin-left: 10px;
      display: inline-block;
      padding: 0 10px;
      line-height: 30px;
      font-size: 12px;
      box-sizing: border-box;
    }
  }
}
</style>
